import QtQuick 1.0
import "../"
import "../Util/Util.js" as Util


Rectangle {
    id: _root
    width: 300
    height: _icon.height + 10
    gradient: Gradient {
        GradientStop {
            id: _grad1
            position: 0
            color: "#00000000"
        }
        GradientStop {
            id: _grad2
            position: 1
            color: "#00000000"
        }
    }
    radius: 0 //"#5555aa"
    border.color: "#5c5c5c"

    property int itemIndex: -1

    property bool iconVisible: true
    property string iconPath: "../images/icon.png"
    property int iconSize: 48

    property string itemId: "0"
    property alias itemTitle: _title.text
    property alias itemMessage: _message.text
    property alias itemInformation: _information.text

    property alias itemPicture: _picture.source

    property alias acceptedButtons: _mouseArea.acceptedButtons

    signal clicked(int itemIndex, variant mouse, int prevPressedButtons)

    ImageWithSpinner {
        id: _icon
        width: 48
        height: iconSize
        anchors.left: parent.left
        anchors.leftMargin: 5
        anchors.verticalCenter: parent.verticalCenter

        source: iconPath
        visible: iconVisible
    }

    Column {
        id: _body
        anchors.left: _icon.right
        anchors.leftMargin: 5
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 5
        spacing: 5

        Text {
            id: _title
            color: _globalSetting.fontColorTitle
            width: parent.width
            font.pointSize: 10
            wrapMode: "WordWrap"
        }

        Text {
            id: _message
            color: _globalSetting.fontColorMessage
            width: parent.width
            font.pointSize: 12
            wrapMode: "WordWrap"
        }

        ImageWithSpinner {
            id: _picture
            width: 0
            height: 0
            source: ""
            visible: false
            anchors.leftMargin: 10

            onSourceChanged: {
                if(source.length > 0){
                    width = 50;
                    height = 50;
                }
            }

            onSourceSizeChanged: {
                width = sourceSize.width;
                height = sourceSize.height;
                visible = true;
            }
        }

        Text {
            id: _information
            color: _globalSetting.fontColorInfomation
            width: parent.width
            font.pointSize: 8
            wrapMode: "WordWrap"
        }

        onHeightChanged: {
            if(_icon.height > _body.height){
                _root.height = _icon.height + 10;
            }else{
                _root.height = _body.height + 10;
            }
        }
    }

    MouseArea {
        id: _mouseArea
        anchors.fill: parent
        hoverEnabled: true
        //            acceptedButtons: Qt.LeftButton | Qt.RightButton

        property int prevPressedButtons: 0

        //クリック時にハイライトさせる
        onPressed: {
            prevPressedButtons = pressedButtons;
            _root.state = "pressed";
        }
        onReleased: {
            _root.state = "";
        }

        //マウスオーバー
        onEntered: {
            _root.state = "hover";
        }
        onExited: {
            _root.state = "";
        }

        //クリック
        onClicked: {
            _root.clicked(itemIndex, mouse, prevPressedButtons);
        }
    }

    states: [
        State {
            name: "pressed"
            PropertyChanges { target: _grad2; color: "#33dd0000" }
        },
        State {
            name: "hover"
            PropertyChanges { target: _grad1; color: "#00555555" }
            PropertyChanges { target: _grad2; color: "#33ffffff" }
        }
    ]

}
